<template>
  <div class="container">
    <card title="价格锁档" hasBack>
      <button class="button is-primary" slot="right" @click="showAdd">增加锁定</button>
      <div class="asm-table">
        <div class="asm-tr">
          <div class="asm-th">价格档位</div>
          <div class="asm-th">产品</div>
        </div>
        <div class="asm-tr" v-for="(ids,key) in data" :key="key">
          <div class="asm-td">{{key}}</div>
          <div class="asm-td tags">
            <span class="tag is-primary" v-for="(id, index) in ids" :key="id">
              {{apps[id]?apps[id].title:''}}
              <button class="delete is-small" @click="deleteTag(key, index)"></button>
            </span>
          </div>
        </div>
      </div>
    </card>
    <card-modal ref="add" title="增加锁定" :visible="false" @click="toAdd">
      <form-item label="价格档位">
        <input class="input" type="text" v-model.number="price">
      </form-item>
      <form-item label="产品">
        <el-select v-model="selectApp" placeholder="请选择App">
            <el-option
              v-for="item in canApps"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
      </form-item>
    </card-modal>
  </div>
</template>
<script>
import { FormItem } from '@/components/Common'
import { CardModal } from '@/components/Modal'
export default {
  name: 'lock',
  components: {
    CardModal,
    FormItem
  },
  created () {
    Promise.all([
      this.$api.get('ads/priority'),
      this.$api.get(`ads?page=1&per_page=10000`)
    ]).then(result => {
      this.data = result[0] || {}
      this.appInfo = result[1].list || []
    })
  },
  computed: {
    apps () {
      let apps = {}
      for (let app of this.appInfo) {
        apps[app.id] = app
      }
      return apps
    },
    canApps () { // 可用的产品
      return this.appInfo.filter(item => {
        // 筛选掉下线了的产品
        if (!item.is_ios) {
          return false
        }
        // 筛选掉不符合价格的
        if (item.min_credit > this.price || item.max_credit < this.price) {
          return false
        }
        // 筛选掉已经存在的
        if (this.data[this.price] && this.data[this.price].indexOf(item.id) > -1) {
          return false
        }
        return true
      })
    }
  },
  data () {
    return {
      selectApp: '',
      price: 1000,
      data: {},
      appInfo: []
    }
  },
  watch: {
    price () {
      this.selectApp = ''
    }
  },
  methods: {
    showAdd () {
      this.$refs.add.open()
    },
    toAdd () {
      if (this.selectApp === '') {
        this.$openMessage({message: `请先选择一款产品`, type: 'error'})
        return
      }
      this.$refs.add.close()
      let param = {}
      param[this.price] = this.data[this.price] || []
      param[this.price].push(this.selectApp)
      this.$api.post('ads/priority', param).then(res => {
        this.$openMessage({message: `新增成功`, type: 'success'})
        this.selectApp = '' // 重置选择的App
      })
    },
    deleteTag (key, index) {
      this.data[key].splice(index, 1)
      let param = {}
      param[key] = this.data[key]
      this.$api.post('ads/priority', param).then(res => {
        this.$openMessage({message: `删除成功`, type: 'success'})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/scss/table.scss';
.asm-td.tags{
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  .tag:not(:last-child) {
    margin-right: 5px;
  }
}
</style>

